<template>
  <div class="com-container">
      <div class="com-chart" ref="hot_ref"></div>
      <span class="iconfont arr-left" @click="toLeft"  :style="comStyle">&#xe6ef;</span>
     <span class="iconfont arr-right" @click="toRight" :style="comStyle">&#xe6ed;</span>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            chartInstance:null,
            allData:null,
            currentIndex:0,
            titleFontSize:0
        }
    },
    computed:{
        comStyle(){
            return{
                fontSize:this.titleFontSize+"px"
            }

        }
    },
    mounted(){
        this.initChart();
        this.getData();
        this.screenAdapter();
        window.addEventListener('resize',this.screenAdapter);
    },
    destroyed(){
        window.removeEventListener('resize',this.screenAdapter);
    },
    methods:{
        initChart(){
            const initOption ={
                title: {
                    text: '▎ 热销商品的占比',
                    left: 20,
                    top: 20
                    },
                legend:{
                    icon:'circle',
                    top:'15%'
                },
                series:{
                    type:"pie"
                },
                 tooltip:{
                    show:'true',
                    formatter:(arg)=>{
                        // console.log(arg);
                        var total =0;
                        arg.data.children.map(item=>{
                            return total+=item.value
                        })
                        // console.log(total);
                        var retStr ='';
                        arg.data.children.map(item=>{
                            return retStr+=`
                                ${item.name}:${parseInt(item.value/total*100)}%
                                <br />
                            `
                        })
                        return retStr
                    }
                },
            };
            this.chartInstance = window.echarts.init(this.$refs.hot_ref,'chalk');
            this.chartInstance.setOption(initOption);
        },
        async getData(){
            //得到数据
            const {data : ret} = await axios.get('http://localhost:8888/hotproduct')
            this.allData =ret;
            console.log(this.allData);
            this.updateChart();
        },
        updateChart(){
            const lengendArr =this.allData[this.currentIndex].children.map(item=>{
                return{
                    name:item.name
                }
            })
            const seriesArr =this.allData[this.currentIndex].children.map(item=>{
                return {
                    name:item.name,
                    value:item.value,
                    children:item.children
                }
            })
            const dataOption ={
                legend:{
                    data:lengendArr
                },
               
                series:[
                    {
                        data:seriesArr
                    }
                   
                ]
            };
            this.chartInstance.setOption(dataOption);

        },
        screenAdapter(){
            this.titleFontSize = this.$refs.hot_ref.offsetWidth / 100 * 3.6
            const adapterOption ={
                title:{
                    textStyle:{
                        fontSize:this.titleFontSize
                    }
                    
                },
                legend:{
                    itemWidth:this.titleFontSize/2,
                    itemHeight:this.titleFontSize/2,
                    itemGap:this.titleFontSize/2,
                    textStyle:{
                        fontSize:this.titleFontSize/2
                    }
                },
                series:[
                    {
                        radius: this.titleFontSize * 4.5,
                        center: ['50%', '60%']
                    }
                ]
            };
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
        },
        toLeft(){
            this.currentIndex--
            if(this.currentIndex<0){
                this.currentIndex =this.allData.length-1
            }
            this.updateChart();
        },
        toRight(){
            this.currentIndex++;
            if(this.currentIndex>this.allData.length-1){
                this.currentIndex=0
            }
            this.updateChart();
        }

    }

}
</script>

<style>
.arr-left {
  position:absolute;
  left: 25%;
  top: 70%;
  transform: translateY(-50%) ;
  /* transform: rotate(180deg); */
  cursor: pointer;
  color: white;
}
.arr-right {
  position:absolute;
  right: 10%;
  top: 70%;
  transform: translateY(-50%);
  cursor: pointer;
  color: white;
}
</style>
